<!-- 
@author wsq
@date  2016-11-13 
@保险公司列表页
-->
<template>
<div class="insCompany">
    <div class="hearder" >
        <Search class='ins_search'
        v-on:value='handleFilter'
        v-bind:placeholder='"输入保险公司名称查找"'>
        </Search>
    </div>
    <div class="con CompanyList" v-on:scroll='handleSroll($event)'>
        <CompanyList
        v-bind:companyList='companyListGroup'
        v-bind:filterStr='filterStr'
        v-bind:filterLength='filterLength'>
        </CompanyList>
        <loading
        v-bind:loading='loading'>
        </loading>
        <toast
        v-if='ajaxError'>
        </toast>
        <div class="jingjing">
            <img class="icon_jj" src="../images/wait.jpg" alt="">
            <p>数据加载失败，请稍后再试</p>
        </div>
    </div>
    <SideBar
    v-show='filterStr==""'
    v-bind:companyList='companyListGroup'>
    </SideBar>
</div>
</template>
<script>
import Search from '../components/Search'
import CompanyList from '../components/CompanyList.vue'
import SideBar from '../components/SideBar.vue'	
import loading from '../components/loading.vue'
import toast from '../components/toast.vue'
import ApiPost from '../api/index.js'
export default{
	name:'insuranceCompany',
	components: {
		  Search,
	    CompanyList,
	    SideBar,
      loading,
      toast
	},
	data () {
	    return {
            "filterLength":'',
            "filterStr":'',
            "loading":false,
            "ajaxError":false,
            "companyList": [],
            "firstString":[],
            "operationType":"insuranceCompanyList"
	    }
    },
	methods: {
		handleFilter:function (a) {
           this.filterStr=a.filterStr
    },//获取保险公司列表
    getInsCompany:function(){
        this.loading = true
        let reqBody = {
              operationType:'insuranceCompanyList',
              requestData:[{
                "osType":'3'
              },{
                "orgKey":"INSURANCE_ORG_KEY"
              }]
          }
        reqBody.requestData = JSON.stringify(reqBody.requestData)
        ApiPost(reqBody,{},function(res){
          this.loading = false
          if(res.resultStatus===1000&&res.result){
            res.result.result.map(function(el,index){
                el.iconfont = el.abbrName.substr(0,1)
                return el
            })
            window.vueLocalstroge.setItem(this.operationType,res.result.result);
            this.companyList = res.result.result
          }else{
            this.ajaxError = true;
          }
          
          
        }.bind(this),function(e){
           this.loading = false;
           this.ajaxError = true;
        }.bind(this))
    },
    handleSroll:function(event){
        event.stopPropagation();
    }
	},//计算属性
  computed:{
      companyListGroup: function (){
          var ListGroup = [],
              obj={},
              filterStr = this.filterStr,
              dataList = this.companyList,
              ListGroup = dataList.filter(function(el) {
                if(filterStr==""){
                  return true
                }
                return (el.abbrName.toLocaleUpperCase().substr(0,filterStr.length) == filterStr.toLocaleUpperCase());
              });
              ListGroup.forEach(function(el,index){
                var character = el.firstCode.toLocaleUpperCase();
                if(!obj[character]){
                  obj[character] = []
                }
                obj[character].push(el)
              })
              this.filterLength = ListGroup.length
          return obj
      }
    },
    mounted:function(){
      this.getInsCompany()
      /*if(window.vueLocalstroge.getItem(this.operationType)!=null){
        this.companyList = window.vueLocalstroge.getItem(this.operationType);
      }else{
        this.getInsCompany()
      }*/
       
    },
    watch:{
      ajaxError:function(){
        window.clearTimeout(this.timer||null)
        this.timer = window.setTimeout(function(){
          this.ajaxError = false
        }.bind(this),2000)
      }
    }
}
</script>
<style>
  html,body{height: 100%;overflow: hidden;}
  .insCompany{
    display:flex;
    flex-direction: column;
    height: 100%;
  }
  .con.CompanyList{
    padding-right: 0.933333rem;
    -webkit-overflow-scrolling: touch;
  }
  .jingjing {
    display: none;
    width: 10.0rem;
    height: 100%;
    text-align: center;
    padding-top: 3rem; 

  }
  .jingjing img{
      display:inline-block; 
  }
  .jingjing p{
      font-size: 0.426667rem;
      text-align: center;
      color: #9b9b9b;
      margin-top:0.533333rem;
  } 
</style>